<template>
  <div class="register">
    <div class="form_box">
      <div class="title">众创云通厂商注册</div>
      <el-form class="custom_form" ref="formRef" :model="form" :rules="rules" size="large" label-width="170">
        <el-card>
          <template #header><el-icon><User /></el-icon>注册人信息</template>
          <el-form-item label="姓名" prop="registerName" required>
            <el-input v-model="form.registerName" type="text" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="registerIdCard" required>
            <el-input v-model="form.registerIdCard" type="text" placeholder="请输入身份证号" clearable></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="registerPhone" required>
            <el-input v-model="form.registerPhone" type="text" placeholder="请输入电话" clearable></el-input>
          </el-form-item>
        </el-card>
        <el-card>
          <template #header><el-icon><OfficeBuilding /></el-icon>公司信息</template>
          <el-form-item label="公司名称" prop="merchantName" required>
            <el-input v-model="form.merchantName" type="text" placeholder="请输入公司名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="法人身份证复印件" prop="corporationIdFront" required>
            <upload-img v-model="form.corporationIdFront" width="400" height="220" uploadIcon="zcytIcon zcyt-shenfenzhengzhengmian" iconSize="100"></upload-img>
          </el-form-item>
          <el-form-item label="" prop="corporationIdBack" required>
            <upload-img v-model="form.corporationIdBack" width="400" height="220" uploadIcon="zcytIcon zcyt-shenfenzhengfanmian" iconSize="100"></upload-img>
          </el-form-item>
          <el-form-item label="logo" prop="merchantLogo" required>
            <upload-img v-model="form.merchantLogo"></upload-img>
          </el-form-item>
          <el-form-item label="省市区县" prop="regions" required>
            <region-select v-model="form.regions" size="large"></region-select>
          </el-form-item>
          <el-form-item label="详细地址" prop="addrs">
            <el-input v-model="form.addrs" type="text" placeholder="请输入详细地址/例如：街道、小区、楼栋" clearable></el-input>
          </el-form-item>
          <div class="btns">
            <el-button @click="$router.go(-1)">取消</el-button>
            <el-button type="primary" @click="doRegister">注册</el-button>
          </div>
        </el-card>
      </el-form>
    </div>
  </div>
</template>

<script setup name="register">
  import { registerApi } from '@/api/api'
  import { regexPhone, regexIdCard } from '@/utils/utils'
  import { ref, reactive, toRefs, getCurrentInstance } from 'vue'

  const currentThis = getCurrentInstance().appContext.config.globalProperties
  // 通过ref获取dom
  const formRef = ref(null)

  const  currentData = reactive({
    form: {
      registerName: '',
      registerIdCard: '',
      registerPhone: '',
      merchantName: '',
      corporationIdFront: '',
      corporationIdBack: '',
      merchantLogo: '24882596142215168,24882596276432896,24882711225528320,24882711292637184,24882711355551744,24882926959554560,24882927089577985,24882927353819136',
      province: '',
      city: '',
      region: '',
      addrs: '',
      regions: []
    },
    rules: {
      registerName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      registerIdCard: [
        { 
          required: true, trigger: ['blur', 'change'], validator: (rule, value, callback) => {
            if(!value) {
              callback(new Error('请输入身份证号'))
            } else {
              if(!regexIdCard(value)) {
                callback(new Error('请输入正确的身份证号'))
              } else {
                callback()
              }
            }
          } 
        }
      ],
      registerPhone: [
        { 
          required: true, trigger: ['blur', 'change'], validator: (rule, value, callback) => {
            if(!value) {
              callback(new Error('请输入手机号'))
            } else {
              if(!regexPhone(value)) {
                callback(new Error('手机号必须是11位，请重新输入'))
              } else {
                callback()
              }
            }
          } 
        }
      ],
      merchantName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
      corporationIdFront: [{ required: true, message: '请上传身份证正面', trigger: 'blur' }],
      corporationIdBack: [{ required: true, message: '请上传身份证反面', trigger: 'blur' }],
      merchantLogo: [{ required: true, message: '请上传logo', trigger: 'blur' }],
      regions: [
        { 
          required: true, trigger: ['blur', 'change'], validator: (rule, value, callback) => {
            if(!value.length) {
              callback(new Error('请选择省、市、区县'))
            } else if(value.length === 1) {
              callback(new Error('请选择市、区县'))
            } else if(value.length === 2) {
              callback(new Error('请选择区县'))
            } else if(value.length === 3) {
              callback()
            }
          } 
        }
      ]
    }
  })
  let {form, rules} = toRefs(currentData)

  // 注册
  function doRegister() {
    formRef.value.validate((valid) => {
      if (valid) {
        currentThis.$messageBox.confirm('确认注册吗？').then(() => {
          let loading = currentThis.$loading('注册中，请耐心等待')
          currentData.form.province = currentData.form.regions[0]
          currentData.form.city = currentData.form.regions[1]
          currentData.form.region = currentData.form.regions[2]
          registerApi(currentData.form).then(res => {
            loading.close()
            if(res.code === '200') {
              currentThis.$message.success('注册成功！')
              currentThis.$router.go(-1)
            } else {
              currentThis.$message.error(res.message)
            }
          }).catch(err => {
            loading.close()
            currentThis.$message.error(res.message)
          })
        }).catch(() => {})
      } else {
        currentThis.$message.error('红色 * 号必填项存在未填写情况！')
        return false;
      }
    })
  }
</script>

<style lang="less" scoped>
.register{
  display: flex;
  justify-content: center;
  .form_box{
    width: 40%;
    padding: 50px 0 20px;
    .title{
      font-size: 30px;
      text-align: center;
      margin-bottom: 30px;
    }
    
    :deep(.el-form){
      .el-card{
        margin-bottom: 15px;
        .el-card__header{
          display: flex;
          align-items: center;
          .el-icon{
            margin-right: 5px;
          }
        }
        .el-card__body{
          padding: 40px 145px 20px 50px;
          .el-form-item{
            margin-bottom: 30px;
          }
          .btns{
            padding-left: 95px;
            display: flex;
            justify-content: center;
          }
        }
      }
    }
  }
}
</style>